<template>
<el-scrollbar style="height:100%;">
  <div class="container p-40">
    <div>
      <p class="d-flex d-p-flex">
        <span class="f-24">实时概况</span>
        <span class="f-18 color-gray">更新时间：2020-10-27 15:56:06</span>
      </p>
      <div class="box-div d-flex" style="height: 2rem">
        <div class="d-flex title-blok" style="margin-left:-0.2rem">
          <img src="" alt="" />
          <div>
            <p class="f-22 color-gray">持有房产建筑面积(平方米)</p>
            <p class="f-32 color-blue">690863.56</p>
          </div>
        </div>
        <div class="d-flex title-blok">
          <img src="" alt="" />
          <div>
            <p class="f-22 color-gray">自有产权房产(平方米)</p>
            <p class="f-32 color-blue">290903.06</p>
          </div>
        </div>
        <div class="d-flex title-blok">
          <img src="" alt="" />
          <div>
            <p class="f-22 color-gray">自有使用权房产(平方米)</p>
            <p class="f-32 color-blue">98353.56</p>
          </div>
        </div>
        <div class="d-flex title-blok">
          <img src="" alt="" />
          <div>
            <p class="f-22 color-gray">委托管理房产(平方米)</p>
            <p class="f-32 color-blue">1103.56</p>
          </div>
        </div>
        <div class="d-flex img-block">
          <p class="f-22 color-gray">当前空置率</p>
          <div id="complete-schedule"></div>
        </div>
      </div>
      <p class="d-flex d-p-flex">
        <span class="f-24">综合分析</span>
        <span class="f-18 color-gray">更新时间：2019-11-02 15:56:06</span>
      </p>
      <div id="comprehensive"></div>
      <p class="d-flex d-p-flex">
        <span class="f-24">区域分析</span>
        <span class="f-18 color-gray">更新时间：2019-11-02 15:56:06</span>
      </p>
      <div class="box-div d-flex" style="height: 4rem; width: calc(100% + 20px); margin-left: -10px;margin-top:0.4rem;">
        <div class="d-flex box-block" v-for="(item, index) in regionalAnalysisDataSource">
          <p class="title f-18">{{ item.title }}</p>
          <div :id="'rents-chart-' + index" class="chart"></div>
          <div class="conclusion">
            <p>
              <span>上月房租应收:</span>
              <span>￥{{ item.accountsReceivable }}</span>
            </p>
            <p>
              <span>上月房租实收:</span>
              <span>￥{{ item.actualChargePayment }}</span>
            </p>
            <p>
              <span>地址:</span>
              <span>{{ item.address }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</el-scrollbar>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      regionalAnalysisDataSource: [
        {
          title: "惠鑫公寓",
          accountsReceivable: "541875.00",
          actualChargePayment: "65323.00",
          address: "广东省-深圳市-宝安区",
          rents: "95",
        },
        {
          title: "燕美上塘龙梅",
          accountsReceivable: "541875.00",
          actualChargePayment: "65323.00",
          address: "广东省-深圳市-宝安区",
          rents: "75",
        },
        {
          title: "上丰花园公寓",
          accountsReceivable: "541875.00",
          actualChargePayment: "65323.00",
          address: "广东省-深圳市-宝安区",
          rents: "83",
        },
        {
          title: "燕美公寓",
          accountsReceivable: "541875.00",
          actualChargePayment: "65323.00",
          address: "广东省-深圳市-宝安区",
          rents: "64",
        },
        {
          title: "惠鑫公寓",
          accountsReceivable: "541875.00",
          actualChargePayment: "65323.00",
          address: "广东省-深圳市-宝安区",
          rents: "95",
        },
      ],
    };
  },
  methods: {
    loadEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let compS = this.$echarts.init(
        document.getElementById("complete-schedule")
      );
      let comp = this.$echarts.init(document.getElementById("comprehensive"));
      // 指定图表的配置项和数据
      let option1 = {
        graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "center",
            top: "center",
            style: {
              text: "42.58%",
              textAlign: "center",
              fill: "#4291FA", //文字的颜色
              fontSize: this.$font.convertPx(18),
              color: "#4291FA",
              fontFamily: "Microsoft YaHei",
            },
          },
        ],
        series: [
          {
            type: "pie",
            //内外圆弧
            radius: ["80%", "90%"],
            data: [42.58, 57.42],
            //起始角度
            startAngle: 180,
            //悬浮放大
            hoverAnimation: false,
            color: ["#4291FA", "#eeeeee"],
            label: {
              //去除饼图的指示折线label
              normal: {
                show: false,
              },
            },
          },
        ],
      };
      let option2 = {
        tooltip: {
          formatter: function (params, ticket, callback) {
            return "￥" + params.data;
          },
          extraCssText:
            "background:#dae9fc;border:1px solid #4291FA;color:#4291FA;padding:5px;",
        },
        grid: {
          left: "5%",
          right: "0",
          bottom: "5%",
        },
        xAxis: {
          splitLine: { show: false },
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              fontSize: this.$font.convertPx(18),
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          data: [
            "2019-09",
            "2019-10",
            "2019-11",
            "2019-12",
            "2020-01",
            "2020-02",
            "2020-03",
            "2020-04",
            "2020-05",
            "2020-06",
            "2020-07",
            "2020-08",
          ],
        },
        yAxis: {
          splitLine: { show: false },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLabel: {
            textStyle: {
              fontSize: this.$font.convertPx(18),
            },
          },
          axisLine: {
            //y轴
            show: false,
          },
        },
        series: [
          {
            barWidth: "10%",
            itemStyle: {
              color: "#4291FA",
              barBorderRadius: [10, 10, 10, 10],
            },
            type: "bar",
            data: [
              50300.32,
              63020.32,
              72000.32,
              57000.32,
              62000.32,
              74300.32,
              50300.32,
              63020.32,
              72000.32,
              57000.32,
              62000.32,
              74300.32,
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      compS.setOption(option1); //完成进度
      comp.setOption(option2); //当前空置率
      //遍历生成图表
      this.regionalAnalysisDataSource.forEach((v, i) => {
        let chart = this.$echarts.init(
          document.getElementById("rents-chart-" + i)
        );
        let option = JSON.parse(JSON.stringify(option1));
        option.graphic[0].style.text = v.rents + "%";
        option.graphic[0].style.fill = "#000";
        let rents = Number(v.rents);
        option.series[0].data = [rents, 100 - rents];
        chart.setOption(option);
      });
    },
  },
  created() {},
  mounted() {
    //页面渲染后 加载Echart
    //宽距不正常 需要等待dom树加载完成
    setTimeout(() => {
      this.loadEcharts();
    }, 50);
    this.$erd.listenTo(document.querySelector(".container"), (element) => {
      this.$nextTick(() => {
        let comp = this.$echarts.init(document.getElementById("comprehensive"));
        comp.resize(); //重新绘制
      });
    });
  },
};
</script>

<style scoped>
.d-p-flex {
  margin-bottom: 0.2rem;
}
.box-div {
  width: 100%;
  margin-bottom: 0.2rem;
}
.box-div > * {
  height: 100%;
  box-sizing: border-box;
}
.title-blok {
  width: 4rem;
  background-image: url("../../assets/img/housing/fygl_money_bg.png");
  background-size: 100% 100%;
  padding-left: 0.6rem;
  flex: 2;
}
.img-block {
  padding-top: 0.1rem;
  padding-bottom: 0.3rem;
  flex-direction: column;
  flex: 2;
  justify-content: center;
}
.img-block p {
  text-align: center;
  flex: 1;
  margin-bottom: 10px;
}
.img-block div {
  flex: 9;
  width: 100%;
}
#comprehensive {
  width: 100%;
  height: 5rem;
  margin-bottom: 0.6rem;
}
.box-block {
  width: calc(100% / 5);
  padding: 0.35rem;
  flex-direction: column;
  background-image: url("../../assets/img/housing/fygl_apartment_bg.png");
  background-size: 100% 100%;
  height: 4.5rem;
}
.box-block > .title {
  color: #4d4d4d;
  text-align: left;
  width: 100%;
}
.box-block > .chart {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 0.15rem;
  height: 2rem;
}
.box-block > .conclusion {
  width: 100%;
}
.box-block > .conclusion > p {
  color: #4d4d4d;
  width: 100%;
  font-size: 0.14rem;
  margin: 0.15rem 0;
  display: flex;
  justify-content: space-between;
}
</style>
